<template>
  <view
    class="mall-container"
    :style="'padding-top:' + header.allHeight + 'px'"
  >
    <view>
      <view
        class="mall-header"
        :style="
          'height:' +
          header.height +
          'px;' +
          'padding-top:' +
          header.top +
          'px;padding-bottom:12rpx'
        "
      >
        <view class="select-city" :style="'top:' + header.top + 'px'">
          <text class="city">{{ city }}</text>
          <image
            class="down-icon"
            src="/static/images/mall/down@3x.png"
            mode=""
          ></image>
        </view>
        <view
          @click="toSearchPage"
          class="mall-search"
          :style="'top:' + header.top + 'px'"
          >输入您想要的内容</view
        >
      </view>
      <!-- 主体内容 -->
      <view class="mall-content">
        <!-- 背景 -->
        <view class="bg">
          <image
            src="http://static.kuaimayoupin.com/7763438902599067.png"
            mode=""
          ></image>
        </view>
        <!-- 商品类型 -->
        <view class="type-group">
          <view
            v-for="(item, index) in pcategoryList"
            style="width: 20%"
            :key="index"
            @click="clickSearch(item)"
          >
            <view class="item">
              <image :src="item.icon" class="icon"></image>
              <text class="name">{{ item.name }}</text>
            </view>
          </view>
        </view>
        <!-- 排序 -->
        <view class="sort-content">
          <view
            @click="filtrBySort(1)"
            :class="activeIndex === 1 ? 'sort-item active' : 'sort-item'"
            >全部</view
          >
          <view
            @click="filtrBySort(2)"
            :class="activeIndex === 2 ? 'sort-item active' : 'sort-item'"
            >人气最高</view
          >
          <view
            @click="filtrBySort(3)"
            :class="activeIndex === 3 ? 'sort-item active' : 'sort-item'"
            >好评优先</view
          >
        </view>
        <!-- 单身Party -->
        <view class="mall-section party">
          <view class="header">
            <view class="left">
              <view class="line"></view>
              <text class="main-title">单身Party</text>
              <text class="half-title">｜ 据说这里遇见TA的概率很高哦</text>
            </view>
          </view>
          <view class="list">
            <ProductItemTypeOne :dataList="productList"></ProductItemTypeOne>
          </view>
          <view class="to-more" @click="clickMore(0, 1)">查看更多</view>
        </view>
        <!-- 情侣约会 -->
      </view>
    </view>
    <TabBar :current-page="3" />
  </view>
</template>

<script>
import { mapState } from "vuex";
import ProductItemTypeOne from "@/components/product-item-type-one/product-item-type-one.vue";
export default {
  components: {
    ProductItemTypeOne,
  },
  computed: {
    ...mapState({
      vuex_tabbar: (state) => state.tabbarStore.vuex_tabbar,
    }),
  },
  data() {
    return {
      header: {
        top: 0,
        height: 0,
        allHeight: 0,
      },
      pcategoryList: [],
      productList: [],
      city: "北京",
      activeIndex: 1,
      offset: 0,
    };
  },
  onShow() {
    this.getPcategory();
  },
  created() {
    const header = uni.getMenuButtonBoundingClientRect();
    console.log(header);
    this.header.top = header.top;
    this.header.height = header.height;
    this.header.allHeight = header.top + header.height + 6;
    this.getProductList();
  },
  onPullDownRefresh() {
    this.offset = 0;
    this.getProductList();
  },
  onReachBottom() {
    this.offset += 1;
    this.getProductList();
  },
  methods: {
    clickMore(type, id) {
      uni.navigateTo({
        url:
          "/pageA/search-result/search-result?localType=2&type=" +
          type +
          "&id=" +
          id,
      });
    },
    clickSearch(e) {
      uni.navigateTo({
        url:
          "/pageA/search-result/search-result?localType=3&localName=" + e.name,
      });
    },
    getPcategory() {
      this.$request
        .get({
          url: "pcategory/list",
          data: {
            // code: code
          },
        })
        .then((res) => {
          if (res.status === 1) {
            const pcategoryList = res.data;
            this.pcategoryList = pcategoryList;
          }
        });
    },
    async getProductList() {
      if (this.offset === 0) {
        uni.showLoading();
      }
      const result1 = await this.$request.get({
        url: "product/list",
        data: {
          offset: this.offset,
        },
      });
      if (result1.status === 1) {
        if (this.offset > 0) {
          // 追加更多
          let list = this.productList;
          this.productList = [...list, ...result1.data.list];
        } else {
          // 首次加载
          this.productList = result1.data.list;
        }
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    filtrBySort(sort) {
      this.activeIndex = sort;
    },

    toSearchPage() {
      uni.navigateTo({
        url: "/pageA/search/search",
      });
    },
    beforeSwitch(index) {
      if (index != 2) {
        return true;
      } else {
        uni.navigateTo({
          url: "/publish/publish",
        });
        return false;
      }
    },
  },
};
</script>

<style lang="less">
@import "@/static/css/theme.less";
@import "@/static/css/util.less";

.mall-container {
  background-color: #f3f6f8;
  padding-bottom: 120rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);

  .mall-header {
    display: flex;
    align-items: center;
    background-color: #fff;
    font-size: 30upx;
    padding-left: 22upx;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999999;
    width: 100%;
    box-sizing: content-box;

    .select-city {
      .down-icon {
        width: 17px;
        height: 17px;
        margin-right: 10upx;
      }

      .city {
        color: #474a58;
      }

      margin-right: 10px;
    }

    .mall-search {
      width: 380upx;
      height: 64upx;
      background: rgba(243, 246, 248, 1);
      border-radius: 32upx;
      border: 2upx solid rgba(223, 225, 236, 1);
      color: #8389a0;
      background-image: url("/static/images/mall/search@3x.png");
      background-repeat: no-repeat;
      background-position: 42upx center;
      background-size: 36upx 36upx;
      padding-left: 98upx;
      display: flex;
      align-items: center;
      box-sizing: border-box;
    }
  }

  .mall-content {
    .bg {
      width: 100%;
      height: 394upx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .type-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 710upx;
      // height: 348upx;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0upx 6upx 20upx 0upx rgba(0, 42, 64, 0.07);
      border-radius: 12upx;
      margin: auto;
      padding: 40upx 32upx;
      box-sizing: border-box;
      margin-top: -196upx;
      z-index: 999;
      position: relative;

      .item {
        // width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 32upx;

        .icon {
          width: 72upx;
          height: 72upx;
          margin-bottom: 10upx;
        }

        .name {
          color: #474a58;
          font-size: 26upx;
          line-height: 36upx;
        }
      }
    }

    .sort-content {
      width: 710upx;
      height: 82upx;
      margin: auto;
      display: flex;
      align-items: center;
      font-size: 30upx;
      color: #8389a0;
      padding-left: 12upx;

      .sort-item {
        margin-right: 50upx;
        padding-bottom: 10upx;
      }

      .active {
        color: #474a58;
        font-size: 34upx;
        font-weight: 500;
        background: url("/static/images/mall/active-bottom-icon@3x.png")
          no-repeat center bottom;
        background-size: 35upx 17upx;
      }
    }

    .mall-section {
      width: 100%;
      padding: 32upx 0upx 0 0upx;
      margin: 0 auto 12upx auto;
      border-radius: 12px;
      background-color: white;
      .header {
        margin-bottom: 36upx;
        display: flex;
        justify-content: space-between;
        padding: 0 32rpx;

        .left {
          display: flex;
          align-items: center;

          .line {
            width: 6upx;
            height: 32upx;
            background: url("/static/images/mall/line@3x.png") no-repeat left
              center;
            background-size: 6upx 32upx;
            margin-right: 10upx;
          }

          .main-title {
            color: #474a58;
            font-size: 30upx;
            line-height: 46upx;
          }

          .half-title {
            color: #8389a0;
            font-size: 26upx;
            line-height: 32upx;
          }
        }

        .right {
          color: #474a58;
          font-size: 26upx;
        }
      }

      .to-more {
        border-top: 2upx solid #ededed;
        color: #474a58;
        font-size: 30upx;
        text-align: center;
        line-height: 82upx;
      }
    }

    .party,
    .appointment,
    .flower,
    .tea {
      .list {
        margin-bottom: 40upx;
      }
    }
  }
}
</style>
